<template>
	<view class="apply-proxy-page">
		<image src="../../static/images/bg_1.png" mode="widthFix" class="bg-img"></image>
		<view class="main-box">
			<view class="form-item">
				<view class="label is-required">姓名</view>
				<view class="value-box">
					<input type="text" class="input" placeholder-class="placeholder" placeholder="请填写" />
				</view>
			</view>
			<view class="form-item">
				<view class="label is-required">手机号码</view>
				<view class="value-box">
					<input type="text" class="input" placeholder-class="placeholder" placeholder="请填写" />
				</view>
			</view>
			<view class="form-item">
				<view class="label is-required">希望加盟区域</view>
				<picker class="value-box" style="display: block;" @change="bindPickerChange" mode="region">
					<view style="width: 100%;display: flex;align-items: center;">
						<view class="placeholder" v-if="addressValue === ''">请选择</view>
						<view class="input" v-else>{{addressValue}}</view>
						<u-icon name="arrow-right" color="#999" size="28"></u-icon>
					</view>
				</picker>

			</view>
			<view class="form-item">
				<view class="label">详细地址</view>
				<view class="value-box">
					<input type="text" class="input" placeholder-class="placeholder" placeholder="请填写" />
				</view>
			</view>
			<view class="form-item">
				<view class="label-box">意向加盟类型<text class="desc">（*投资有风险，决策需谨慎）</text></view>
				<view class="radio-box">
					<u-radio-group v-model="joinType" placement="row">
						<view class="radio-wrap">
							<view class="radio-item" v-for="(item, index) in typeList" :key="index">
								<u-radio :label="item.name" :name="item.name">
								</u-radio>
								<text @tap="onClickRadioText(item,index)" class="text"
									:class="joinType === item.name ? 'active' : ''">{{item.name}}</text>
							</view>
						</view>
					</u-radio-group>
				</view>
			</view>
		</view>
		<view class="footer-box">
			<view class="btn active" @tap="onSubmit">提交申请</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {

		data() {
			return {
				addressValue: '',
				joinType: '区域子公司',
				typeList: [{
						name: '区域子公司',
						disabled: false
					},
					{
						name: '区域旗舰店',
						disabled: false
					},
					{
						name: '社区服务点',
						disabled: false
					}
				],
			}
		},
		async onLoad(options) {

		},
		async onShow() {

		},

		methods: {
			onSubmit() {
				if (this.joinType) {

				}
			},

			onClickRadioText(item, index) {
				this.joinType = item.name
			},

			bindPickerChange(e) {
				console.log(e)
				this.addressValue = e.detail.value.join("/")
			}
		},
	}
</script>

<style lang="scss">
	@import "index.scss";
</style>